<template>
<div class="note-example-box">
	<el-button @click='fnC1'>reactive 声明</el-button>
	<div>{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}</div>
	<div>{{fullName1}}</div>
	<div class="note-code-case">
		<textarea :value='codeVal' disabled style="height: 460px;"></textarea>
	</div>
</div>
</template>  
<script setup>
import { reactive, computed } from 'vue'

const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });
const fnC1 = () => {
	objC1.name1 = 'bb1';
	objC1.age++;
	console.log('fnC1', 11);
};
const fullName1 = computed(() => {
	return objC1.name1 + objC1.name2 + objC1.age;
});

const codeVal = `<template>
<el-button @click='fnC1'>11</el-button>
<div>{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}</div>
<div>{{fullName1}}</div>
</template>

<script setup>
import { reactive, computed } from 'vue'

const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });
const fnC1 = () => {
	objC1.name1 = 'bb1';
	objC1.age++;
	console.log('fnC1', 11);
};
const fullName1 = computed(() => {
	return objC1.name1 + objC1.name2 + objC1.age;
});
<script>`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>